<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
import starUtil from "./base/comment/starUtil.vue";
import headerUtil from "./base/common/headerUtil.vue";
import productBannerUtil from "./base/product/productBannerUtil.vue";
import reqApis from '../req/reqApis.js';
import {showToast} from 'vant';



const scrollOutRef = ref();

const currentData = ref<any>({
  detailId: router.currentRoute.value.query.id,
   arr: [1, 2, 3, 4, 5],
  headerObj: {
    showType: 2
  },
  orderDetail: {},
  productInfo: {}
});

const getProductFn = (productId:any) => {
  let params = {
    productId: productId
  };
  reqApis.getProductByIdApi(params).then((res:any) => {
    currentData.value.productInfo = res.data;
  })
};



const getOrderDetailByIdFn = () => {
  if(!currentData.value.isStop){
    let params = {
      detailId: currentData.value.detailId
    };
    reqApis.getOrderDetailByIdApi(params).then((res:any) => {
     currentData.value.orderDetail = res.data;
     getProductFn(currentData.value.orderDetail?.productId)
    })
  }
};

const changeStarFn = (num: any) => {
  if(currentData.value.orderDetail.commentStatus == 0) {
    currentData.value.orderDetail.commentGrade = num;
  }
};

const addOrderCommentFn = () => {
  if(currentData.value.orderDetail.commentGrade == null) {
    showToast("请给本次商品评分");
    return;
  }
  if(currentData.value.orderDetail.commentText == null || currentData.value.orderDetail.commentText.length==0) {
    showToast("评论内容不能为空");
    return;
  }
  reqApis.addOrderCommentApi(currentData.value.orderDetail).then((res:any) => {
     router.push("/myComment")
    })
}



getOrderDetailByIdFn();
</script>
<template>
  <section class="comment">
    <headerUtil :obj="currentData.headerObj">评价</headerUtil>
    <div class="content"  @scroll.passive="scrollData" ref="scrollOutRef">
      <productBannerUtil :imgArr="[currentData.productInfo.productIcon]"></productBannerUtil>
      <div class="desc-wrap">
        <div class="desc">{{currentData.productInfo.productDescription}}</div>
      </div>
      <div class="price-wrap">
        <div class="old-price">￥<span>{{currentData.productInfo.productPrice}}</span>.00</div>
      </div>
      <div class="starWrap">
        <div class="starItem" 
        :class="{'start': currentData.orderDetail?.commentGrade != null && item <= currentData.orderDetail?.commentGrade}" @click="changeStarFn(item)" v-for="(item, index) in currentData.arr" :key="index"></div>
      </div>
      <div>
        <van-cell-group>
        <van-field
          type="textarea"
          v-model.trim="currentData.orderDetail.commentText"
          placeholder="请输入留言"
          rows="2"
          autosize
          maxlength="50"
          show-word-limit
        />
      </van-cell-group>
      </div>
      <div class="btn-wrap">
        <div v-if="currentData.orderDetail?.commentStatus == 0" class="btn2" @click="addOrderCommentFn">确定</div>
      </div>
    </div>
  </section>
</template>

<style lang="less" scoped>
.comment {
  width: 3.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  .content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: .1rem;
    background: white;
    overflow-x: hidden;
    .btn-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: .2rem;
      .btn2 {
        width: 2.5rem;
        height: .45rem;
        line-height: .45rem;
        text-align: center;
        font-size: .16rem;
        border-radius: .2rem;
        margin: 0 0.1rem 0;
        color: white;
        background: #0283f0;
    }
    }
    
    .desc-wrap {
      padding: .1rem 0 .1rem .1rem;
      display: flex;
      background: white;
      .desc {
        flex: 1;
        color: #333;
        font-size: .16rem;
        line-height: .18rem;
        padding-right: .15rem;
      }
      .concern {
        width: .5rem;
        height:.36rem;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        &::after {
          width: 0;
          height: 100%;
          content:"";
          position: absolute;
          top: 0;
          left:0;
          border-left:.01rem solid #ddd;
        }
        .img-icon {
          width: .22rem;
          height: .21rem;
          background: url("../assets/images/cart-icon-6.png") no-repeat;
          background-size: 1rem 1rem;
          background-position: -.5rem -.03rem;
          margin-bottom: .1rem;
          &.active {
            background-position: -.5rem -.26rem;
          }
        }
        .text {
          font-size: .1rem;
          color: #333;
          text-align: center;
        }
      }
    }
    .price-wrap {
      background: white;
      padding: 0 .1rem .04rem;
      display: flex;
      align-items: flex-end;
      position: relative;
      margin-bottom: .1rem;
      .old-price {
        font-size: .12rem;
        color: #e4393c;
        line-height: 1.3;
        margin-right: .02rem;
        span {
          font-size: .18rem;
        }
      }
      .new-price {
        height: .15rem;
        font-weight: 400;
        font-size: .12rem;
        color: #714aff;
      }
      .fans {
        width: .3rem;
        height: .2rem;
        background: url("../assets/images/fans-icon-1.png") no-repeat center;
        background-size: contain;
        margin-top: -.02rem;
      }
      .price-btn {
        width:.6rem;
        height: .2rem;
        font-size: .12rem;
        text-align: center;
        line-height: 20px;
        color: #333;
        position: absolute;
        right: .1rem;
        &::after{
          content: "";
          display: block;
          border: .01rem solid #ddd;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
        }
      }
    }
    .starWrap {
      padding: .2rem 0 .2rem;
      display: flex;
      justify-content: center;
      .starItem {
        width: .3rem;
        height: .3rem;
        margin: 0 .05rem;
        background: url("../assets/images/star-big-icon-1.png") no-repeat;
        background-size: cover;
        &.start {
           background: url("../assets/images/star-big-icon-2.png") no-repeat;
          background-size: cover;
        }
      }

    }
    
  }
}
</style>
